<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box {
            display: block;
            width: 1000px;
            height: 500px;
            margin-left: 20px;
        }

        .first {
            display: flex;
            height: 50px;
            width: 1000px;
        }

        .first h3 {
            font-size: 24px;
        }

        .title {
            margin-left: auto;
            width: 400px;
            height: 50px;
        }

        .title ul {
            list-style: none;
            margin: 0;
            padding: 0;
            display: flex;
            justify-content: space-between;
            height: 100%;
            align-items: center;
        }

        .title li {
            margin: 0;
        }

        .title a {
            display: block;
            line-height: 50px;
            font-size: 18px;
            font-weight: bold;
            color: #333;
            text-decoration: none;
            padding: 0 6px;
            cursor: pointer;
        }

        .title a.active {
            color: red;
            border-bottom: 2px solid red;
        }

        .box1 {
            width: 300px;
            height: 400px;
            margin-top: 10px;
        }

        .box1 img {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }

        .box2 {
            margin-top: 10px;
            width: 700px;
            height: 400px;
        }

        .box2 img {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }

        .cbox {
            display: flex;
        }
    </style>
</head>

<body>
    <div class="box">
        <div class="first">
            <h3>易业煜</h3>
            <nav class="title" aria-label="tabs">
                <ul>
                    <li><a href="#" data-index="0">精选</a></li>
                    <li><a href="#" data-index="1">美食</a></li>
                    <li><a href="#" data-index="2">百货</a></li>
                    <li><a href="#" data-index="3">个护</a></li>
                    <li><a href="#" data-index="4">预告</a></li>
                </ul>
            </nav>
        </div>
        <div class="cbox">
            <div class="box1">
                <img src="../images/img/1.webp" alt="">
            </div>
            <div class="box2">
                <img src="../images/img/2.webp" alt="">
            </div>
        </div>
    </div>
    <script>
        const titleWrap = document.querySelector('.title ul');
        const img1 = document.querySelector('.box1 img');
        const img2 = document.querySelector('.box2 img');
        const imgList = [
            ['../images/img/1.webp', '../images/img/2.webp'],
            ['../images/img/3.webp', '../images/img/4.webp'],
            ['../images/img/5.webp', '../images/img/6.webp'],
            ['../images/img/slider03.jpg', '../images/img/slider04.jpg'],
            ['../images/img/slider01.jpg', '../images/img/slider02.jpg']
        ];

        titleWrap.addEventListener('click', function (e) {
            e.preventDefault(); // 阻止a标签默认跳转行为
            const target = e.target;
            // 判断点击的是否是a标签
            if (target.tagName.toLowerCase() === 'a') {
                // 1. 切换图片：通过dataset获取自定义属性data-index
                const index = target.dataset.index;
                img1.src = imgList[index][0];
                img2.src = imgList[index][1];

                // 2. 排他思想切换样式
                const allLinks = titleWrap.querySelectorAll('a');
                allLinks.forEach(link => link.classList.remove('active'));
                target.classList.add('active');
            }
        });
    </script>
</body>

</html>